<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        input {
            display: block;
        }
    </style>
</head>
<body>
<ul>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <button>设置</button>
</ul>
<script>
    //需求：点击设置按钮，让所有的input标签获取焦点后高亮显示
    //步骤：
    //1.获取事件源
    //2.绑定事件
    //3.书写事件驱动程序

    //1.获取事件源
    var inpArr = document.getElementsByTagName("input");
    var button = inpArr[inpArr.length-1].nextElementSibling || inpArr[inpArr.length-1].nextSibling ;
    //2.绑定事件
    button.onclick = function () {
        //3.书写事件驱动程序
        for(var i=0;i<inpArr.length;i++){
            //当button按钮被点击以后，所有的input标签被绑定事件，onfocus事件
            inpArr[i].onfocus = function () {
                this.style.border = "2px solid red";
                this.style.backgroundColor = "#ccc";
            }
            //绑定onblur事件，取消样式
            inpArr[i].onblur = function () {
                this.style.border = "";
                this.style.backgroundColor = "";
            }
        }
    }



</script>
</body>
</html>